<template>
  <div class="hotel-item-wrap">
    <router-link :to="{path: '/detail', query: {field: 'hotel', id: this.hotelInfo.id}}">
      <div class="hotel-img-wrap">
        <img :src="this.hotelInfo.img" />
      </div>
      <div class="hotel-info">
        <span class="hotel-name">{{this.hotelInfo.name}}</span>
        <span class="score">{{this.hotelInfo.score}}分</span>
        <span class="area">{{this.hotelInfo.area}}</span>
        <span class="hotel-price">
          <span class="hotel-info">
            ￥
            <span>{{this.hotelInfo.default_price}}</span>
            起
          </span>
          <span class="hotel-cityname">{{this.hotelInfo.city_name}}</span>
        </span>
      </div>
    </router-link>
  </div>
</template>

<script>
  export default {
    name: 'HotelItem',
    props: {
      hotelInfo: Object
    }
  }
</script>

<style lang="scss" scoped="scoped">
  @import '~styles/mixins.scss';
  @import '~styles/variables.scss';

  .hotel-item-wrap a {
    @include flex-row;

    .hotel-img-wrap {
      width: 1.2rem;
      height: 1.2rem;
      padding: .1rem;

      img {
        width: 1.2rem;
        height: 1.2rem;
      }
    }

    .hotel-info {
      flex: 1;
      @include flex-column;
      justify-content: space-between;
      overflow: hidden;
      padding: .1rem;

      .hotel-name {
        @include ellipsis;
        font-size: .18rem;
        line-height: .2rem;
      }

      .score {
        color: orange;
        font-size: .16rem;
      }

      .area {
        color: #999;
        font-size: .14rem;
      }

      .hotel-price {
        display: flex;
        align-items: center;

        .hotel-info {
          display: inline;
          font-size: .14rem;
          color: $defaultGreen;
          margin-left: -.14rem;

          span {
            font-size: .18rem;
            margin-left: -.06rem;
          }
        }

        .hotel-cityname {
          font-size: .14rem;
        }
      }

    }
  }
</style>
